<template>
    <div class="wl-login">
      <img  class="img-bg" src="~src/assets/img/L_ground.jpg" />
      <img  class="img-title" src="~src/assets/img/L_title.png" />
      <img  class="img-bg2" src="~src/assets/img/L_content.png" />
      <div  class="container">
      	<div id="login_text" class="title-label" style="font-size: 18px;font-weight:bold;">
					登录/Login
				</div>
        <div class="div-flex">
          <div class="input-group-addon">
            <img src="~src/assets/img/L_user.png" />
          </div>
          <el-input @keyup.enter.native="login" v-model="name" placeholder="请输入账号"></el-input>
        </div>
        <div class="div-flex">
          <div class="input-group-addon">
            <img src="~src/assets/img/L_password.png" />
          </div>
          <el-input @keyup.enter.native="login" v-model="password" type="password" placeholder="请输入密码"></el-input>
        </div>
        <div class="div-code">
        <div class="code-flex">
          <div class="input-group-addon">
            <img src="~src/assets/img/L_code.png" />
          </div>
        <el-input @keyup.enter.native="login" v-model="logincode" @keyup.enter="submit" placeholder="请输入验证码"></el-input>
        </div>
        <div >
          <img  @click="updateImg" v-bind:src="imageSrc"/>
        </div>
        </div>
        <div class="ckeckbox-login">
          <el-checkbox  v-model="remember">记住我</el-checkbox>
        </div>
        <el-button class="btn-login" @click="login" type="success">登录</el-button>
        <!-- <div style="margin-top:10px">
          <el-button @click="netQeq" type="success">其他数据请求测试</el-button>
        </div> -->
      </div>
    </div>
</template>


<script>
import { LoginApi } from "src/api";
import * as Api from "src/api/net";
export default {
  data() {
    return {
      name: "",
      password: "",
      logincode: "",
      remember: false,
      imageSrc: Config.ajaxUrl + "/test/authCode.do?"
    };
  },
  beforeCreate() {
    //检测页面刷新时是否登录
    var sendData = {};
    Api.checkAjaxPost(Config.ajaxUrl + "/xin_check_login.do", sendData, res => {
      if (res.code != 0) {
        this.$router.push({ path: "/login" });
      } else if (res.code == 0) {
        this.$router.push({ path: "/main" });
      }
    });
  },

  mounted() {
    this.updateImg();
  },
  watch: {
    $route: "getPath"
  },
  methods: {
    submit() {},
    getPath() {
      let path = this.$route.path;
      let pointer = this;
      if (path == "/login" || path == "") {
        var postData = {};
        LoginApi.ajaxCheckLogin(postData, function(data) {
          pointer.$router.push({ path: "/main" });
        });
      }
    },
    login() {
      if (this.checkForm() === false) {
        this.updateImg();
        return false;
      }

      localStorage.setItem("serverUrl", Config.ajaxUrl);
      let pointer = this;
      var postData = {
        xin_user: this.name,
        xin_password: this.password,
        xin_validate_code: this.logincode,
        "remember-me": this.remember
      };

      LoginApi.ajaxLogin(postData, function(data) {
        if (data.code === 0) {
          pointer.$message.success("登录成功");
          var jsonText = JSON.stringify(data);
          localStorage.setItem("localUserData", jsonText);
          pointer.$router.push({ path: "/main" });
        } else {
          WLMessage("验证码输入错误", "warning");
          pointer.updateImg();
        }
      });
    },
    netQeq() {
      var postData = {
        curr_page: 1,
        page_size: 15
      };
      LoginApi.ajaxGetCompanyData(postData, function(data) {});
    },
    updateImg() {
      this.imageSrc =
        window.Config.ajaxUrl + "/test/authCode.do?" + Math.random();
    },
    checkForm() {
      var nametip = this.checkUserName(this.name);
      if (nametip === false) {
        WLMessage("账号输入错误", "warning");
        return false;
      }
      var passtip = this.checkPassword(this.password);
      if (passtip === false) {
        WLMessage("密码由数字或字母组合，长度为6-16位", "warning");
        return false;
      }
      return true;
    },
    checkPassword(textValue) {
      var pattern = /^\w{6,16}$/;
      if (!pattern.test(textValue)) {
        return false;
      } else {
        return true;
      }
    },
    checkUserName(textValue) {
      var pattern = /^\w{1,}$/;
      if (textValue.length == 0) {
        return false;
      } else {
        return true;
      }
    }
  }
};
</script>



<style scoped>
.img-bg {
  width: 100%;
  height: 90vh;
  position: absolute;
  top: 3vh;
  left: 0;
}

.img-title {
  position: absolute;
  top: 2vh;
  left: 5vw;
}

.img-bg2 {
  width: 60%;
  position: absolute;
  top: 20vh;
  left: 0;
}

.container {
  width: 350px;
  padding: 20px;
  background-color: #fff;
  position: absolute;
  right: 6vw;
  top: 25vh;
}

.title-label {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #3a87ad;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 18px;
  font-weight: bold;
}

.input-group-addon {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #555555;
  text-align: center;
  background-color: #eeeeee;
  border: 1px solid #cccccc;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.div-flex {
  display: flex;
  margin-top: 20px;
  height: 47px;
}

.code-flex {
  display: flex;
  height: 47px;
}

.div-code {
  margin-top: 20px;
  width: 320px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-login {
  width: 350px;
  height: 40px;
  margin-top: 20px;
}

.ckeckbox-login {
  margin-top: 20px;
  text-align: left;
}
</style>

<style>
.div-flex .el-input--mini .el-input__inner {
  height: 100%;
  border-radius: 0;
}

.code-flex .el-input--mini .el-input__inner {
  height: 100%;
  border-radius: 0;
}
</style>

